<template>
  <Drawer :closable="true" width="640" v-model="drawerShow" @on-close="close">
    <p class="title">上传任务列表</p>
    <p class="uploadType">本地上传</p>
    <div class="uoloadList">
      <div  v-if="uplist&&uplist.length>0">
        <div class="uoloadList-item" v-for="(item,index) in uplist" :key="index">
          <p class="flex justify-between">
            <span>{{item.name}}</span>
            <span class="progress-data" style="margin-right:30px">文件大小:{{item.dataSize}}</span>
          </p>
          <Progress :percent="item.uploadPercentage" status="active" />
          <p v-html="setStatus(item.uploadStatus)"></p>
        </div>
      </div>
      <div v-if="uplist.length==0&&errorList.length>0">
        <div class="uoloadList-item" v-for="(item,index) in errorList" :key="index">
          <p class="flex justify-between">
            <span>{{item.name}}</span>
            <span class="progress-data" style="margin-right:30px">文件大小:{{item.dataSize}}</span>
          </p>
          <Progress :percent="item.uploadPercentage" status="active" />
          <p v-html="setStatus(item.uploadStatus)"></p>
        </div>
      </div>
      <div v-if="uplist.length==0&&errorList.length==0">暂无上传数据</div>
    </div>
  </Drawer>
</template>

<script>
import {
  createNamespacedHelpers
} from 'vuex'
import {uploadStatus} from 'assets/scripts/code'

const {
  mapState,
  mapMutations
} = createNamespacedHelpers('files')
export default {
  props: {
    uploadListShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      drawerShow: false,
      uplist: [],
      pStyle: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px'
      }
    }
  },
  methods: {
    close () {
      this.drawerShow = false;
      this.$emit('update:uploadListShow', false)
    },
    setStatus (value) {
      let content
      switch (value) {
        case 0:
          content = '<span style="color:#5571CD">等待上传</span>'
          break;
        case 1:
          content = '上传中'
          break;
        case 2:
          content = '<span style="color:#19BE6B">上传完成</span>'
          break;
        case -1:
          content = '<span style="color:red">上传失败，请重新上传</span>'
          break;
        default:
          content = '<span style="color:#5571CD">等待上传</span>'
      }
      return content
    },
    ...mapMutations([
      'setUploadData'
    ])
  },
  watch: {
    uploadListShow (val) {
      this.drawerShow = val
    },
    tableData (val) {
      this.uplist = val.filter((val, index) => {
        if (val.uploadStatus !== uploadStatus.SUCCESS) {
          return true
        }
      })
    }
  },
  computed: {
    tableData () {
      return [...this.localListUse, ...this.uploadData]
    },
    ...mapState({
      uploadData: state => state.uploadData,
      localListUse: state => state.localListUse,
      errorList: state => state.errorList
    })
  }
}
</script>

<style lang="less" scoped>
.title {
    padding-bottom: 10px;
    font-size: 18px;
}
.uploadType {
    padding-bottom: 10px;
    font-size: 16px;
}
.uoloadList {
    padding: 0 20px;
}
.progress-data {
    float: left;
}
.uoloadList-item {
    margin-bottom: 20px;
}
</style>
